<!-- 经济项目某些特例需要去除同一pipeline下关系的约束，放开全部列表，后续这种情况多了后，需考虑做成通用组件且不因依赖store -->
<template>
  <interact-form
    v-if="relateWidgets.length > 0"
    :checked-widgets="checkedWidgets"
    :relate-widgets="relateWidgets"
    :current-name="currentWidgetTitle ? currentWidgetTitle : currentWidgetId"
    @change="onRelateWidgetsChange"
  >
    <template #filterColumn>
      <a-row>
        <a-col :span="8">
          筛选字段
        </a-col>
        <a-col :span="16">
          <a-select
            size="small"
            placeholder="请选择"
            :value="interactColumnName"
            @change="onInteractColumnChange"
          >
            <a-select-option
              v-for="column in storeColumnList"
              :key="column.name"
            >
              {{ column.name }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </template>
  </interact-form>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import VisualizationStore from '@/store/modules/visualization'
import InteractForm from '@/components/common/VisualizationDashboard/InteractForm.vue'
import FormRenderStore from '@/store/modules/form-render'
import { cloneDeep, isEqual } from 'lodash'

@Component({
  components: {
    InteractForm,
  },
})
export default class BubbleInteractForm extends Vue {
  @Prop({ default: '' }) interactColumnName!: string

  private relateWidgets: any[] = [] // 可关联图表的全部list
  private checkedWidgets: string[] = [] // 勾选的widget

  mounted() {
    this.initRelateWidgets()
  }
  /**
   * currentGridItem 中记录的关联列表信息
   */
  private get interactionJson() {
    return VisualizationStore.currentGridItem?.interactionJson
  }
  private get currentWidgetTitle() {
    return VisualizationStore.currentGridItem?.chartOptions?.title
  }
  private get currentWidgetId() {
    return VisualizationStore.currentGridItem?.widgetId
  }

  private get storeColumnList() {
    return FormRenderStore.columnList
  }

  @Watch('interactionJson')
  private onInteractionJsonChange(newValue: any, oldValue: any) {
    if (isEqual(newValue, oldValue)) {
      return
    }
    this.initRelateWidgets()
  }

  /**
   * 初始化关联list
   */
  private initRelateWidgets() {
    const gridList = VisualizationStore.gridList.filter(
      (gridItem) =>
        gridItem.widgetId &&
        gridItem.i !== VisualizationStore.currentGridItem?.i &&
        gridItem.chartType !== 'text'
    )
    if (this.interactionJson && this.interactionJson.relateWidgets) {
      // widget 中有记录时 list以当前画布中的gridList为准，再同步interactionJson中的关联状态
      const relateWidgetsIds = new Set(
        this.interactionJson.relateWidgets.map((widget: any) => widget.widgetId)
      )
      this.relateWidgets = this.interactionJson.relateWidgets
      this.relateWidgets = gridList.map((item) => {
        if (!relateWidgetsIds.has(item.widgetId)) {
          // 不存在widget的记录中，新增一条记录
          return {
            widgetId: item.widgetId,
            taskId: item.chartOptions.dataId,
            tableName: null,
            chartName: null,
            status: 'available',
            connected: false,
            loseConnected: false,
            // xattrStr: 'species',
            // xattrValueType: 'varchar',
            disabled: false,
            label: item.chartOptions.title || item.widgetId,
            value: item.widgetId,
          }
        }
        // 否则直接返回widget记录中的内容
        return {
          ...this.relateWidgets.filter(
            (widget) => widget.widgetId === item.widgetId
          )[0],
          label: item.chartOptions.title || item.widgetId,
        }
      })
      this.checkedWidgets = this.relateWidgets
        .filter((item) => {
          return item.status === 'connected'
        })
        .map((item) => item.widgetId)
    } else {
      // widget中没有记录时，直接从gridList 进行初始化
      this.checkedWidgets = []
      this.relateWidgets = gridList.map((gridItem) => {
        return {
          widgetId: gridItem.widgetId,
          taskId: gridItem.chartOptions.dataId,
          tableName: null,
          chartName: null,
          status: 'available',
          connected: false,
          loseConnected: false,
          // xattrStr: 'species',
          // xattrValueType: 'varchar',
          disabled: false,
          label: gridItem.chartOptions.title || gridItem.widgetId,
          value: gridItem.widgetId,
        }
      })
    }
  }

  /**
   * 关联关系变化
   */
  private onRelateWidgetsChange(checkedList: any[]) {
    console.log(checkedList)
    const list: any[] = cloneDeep(this.relateWidgets)
    list.forEach((item) => {
      // delete item.label
      // delete item.value
      if (checkedList.includes(item.widgetId)) {
        item.status = 'connected'
      } else {
        item.status = 'available'
      }
    })

    this.$emit('relateWidgetsChange', {
      type: 'interact',
      data: {
        relateWidgets: list,
      },
    })
  }
  /**
   * 交互筛选字段调整
   */
  private onInteractColumnChange(value: string) {
    this.$emit('interactColumnChange', {
      interactColumnName: value,
    })
  }
}
</script>
